<template>
<!--background-image: 使用线性渐变从#1352F2到#3C82F5，渐变角度为135度，提供视觉上的层次感和深度。-->
  <div style="height: 100vh;background-image: linear-gradient(135deg,#1352F2,#3C82F5);overflow: hidden;">
  <el-container style="padding: 30px;">
    <el-header>
      <el-row :gutter="10">
        <el-col :span="3">
          <img src="/imgs/login/logo.png" style="height: 50px;">
        </el-col>
        <el-col :span="1">
          <img src="/imgs/login/auto.png" style="height: 50px;">
        </el-col>
        <el-col :span="1">
          <img src="/imgs/login/verticalLine.png" style="height: 50px;">
        </el-col>
        <el-col :span="19">
          <span style="color: #fff;font-size: 30px; font-weight: bold">智慧营销系统</span>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row :gutter="40">
        <el-col :span="16">
          <img src="/imgs/login/bg.png" style=" width: 100%; margin-top: 60px;">
        </el-col>
        <el-col :span="8">
          <el-card style="margin-top: 80px">
            <h3 style="text-align: center;">用户登录</h3>
            <el-form label-position="top">

              <el-form-item label="请选择视角" v-model="selectedValue">
                <el-select v-model="selectedValue" @change="handleChange" placeholder="请选择">
                  <el-option label="用户视角" value="platform"></el-option>
                  <el-option label="商户视角" value="business"></el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="用户名">
                <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input placeholder="请输入用密码" show-password v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
              </el-form-item>
            </el-form>
            <div style="color: #666;text-align: center; font-size: 14px; padding: 10px 0;">
              (体验账号:tom 密码:123456)
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</div>

</template>

<script setup>
import { ref } from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

// 定义选中值和只读状态
const selectedValue = ref('platform');
const isReadonly = ref(true);

// 监听选择变化
const handleChange = (value) => {
  console.log('Selected value:', value);
  // 这里可以添加业务逻辑
};


// 定义对象用来保存用户输入的登录数据
const user = ref({
  user_name: '',
  password: ''
});
// 定义对象用来保存用户输入的登录数据
const data = ref({
  business_name: '',
  password: ''
});



//1. 定义登录方法
const login = () => {
  console.log(user.value);
  router.push('/');
  // //2.给后端服务区发送登录请求，这里需要借助axios!
  // axios.post(BASE_URL+'/v1/user/login',user.value)
  //     .then((response)=>{
  //       //3. .then()为回调函数，可以在此函数中处理接收到的后端响应
  //       // response是响应对象，response.data为响应的数据
  //   console.log(response.data);
  //   // 4.判断登录是否成功，如果成功，则跳转到首页
  //       if(response.data.code == 2000){
  //         ElMessage.success('登陆成功');
  //         // 登陆成功跳转到首页router/index.js配置了会重定向到/user用户列表页
  //         /*登录成功后，将后端返回的userVO 存入localStorage*/
  //         /*localStorage维护的是字符串类型的键值对 （String key：String value：） 类型 */
  //         // console.log(response.data);
  //         // console.log(response.data.data);
  //         // console.log(JSON.stringify(response.data.data)); 字符串类型的userVO
  //         localStorage.setItem('user', JSON.stringify(response.data.data));
  //         router.push('/');
  //       } else {
  //         ElMessage.error(response.data.msg);
  //         user.value = {username: '', password: ''} // 登录失败清空表单输入框内容
  //       }
  // })
}
</script>


<style scoped>

</style>